<#include "/default/layout/account.htm"/> 
<@layout>
		<div class="block-center mt-xl wd-xl">
			<div class="panel panel-dark panel-flat">
				<div class="panel-body" id="forgotPasswordPage">
					<form method="POST" action="${ctx}/user/newpassword?redirect=${RequestParameters.redirect}">
						<p class="text-center pv">请填写您的手机号来收取密码重置验证码</p>
						<div class="form-group has-feedback">
							<input id="phone" name="phone" placeholder="输入手机号码" class="form-control" data-parsley-required-message="输入手机号码" data-parsley-type-message="输入手机号码" required="required" /> 
                     		<span class="fa fa-user form-control-feedback text-muted"></span>
						</div>
						<div class="form-group row">
						  <div class="col-md-2 col-sm-4" >
						  	<input id="key" name="key" placeholder="6位数字" class="form-control" data-parsley-required-message="6位数字" data-parsley-type-message="6位数字" required="required" /> 
						  </div>
						  <div class="col-md-2 col-sm-4" >
						  	<a id="sendphoneButton" onclick="sendphone();" class="btn btn-block btn-default">发送验证码</a>
						  </div>
						</div>
						<p class="text-center" style="color: red" id="message" >${message!}</p>
						<button type="submit" class="btn btn-block btn-primary mt-lg">下一步</button>
					</form>
					<p></p>
               		<a href="${ctx}/login?redirect=${RequestParameters.redirect}" class="btn btn-block btn-default">返回登录</a>
				</div>
			</div>
			<div class="p-lg text-center">
			</div>
		</div>	
	
	<script type='text/javascript' th:inline="javascript">
		function sendphone() {
			$("#sendphoneButton").text("正在发送中...");
			if($('#sendphoneButton').attr("disabled") != "disabled"){
				var redirect = '${redirect}';
				var phone = $("#phone").val();
				$('#sendphoneButton').attr("disabled", true);
				$.ajax({                                               
					url: '${ctx}/user/sentphone', 
					data:{'redirect':redirect,'phone':phone,'category':'forgetpasswordbyphone'},
					type: 'GET',
					contentType: "application/json;charset=UTF-8",		
					dataType: 'text',
					success: function(data){
						$("#message").text("");
						var resultData = $.parseJSON(data);
						if(resultData.code == 200 || resultData.status == 'success'){
							var t=200;//设定跳转的时间 
							var time = setInterval(
									function (){  
									    $("#sendphoneButton").text("验证码已发送 "+t+" 秒后重试"); // 显示倒计时 
									    t--; // 计数器递减 
									    if(t==0){ 
									    	clearInterval(time);
									    	$('#sendphoneButton').removeAttr("disabled");
									    	$("#sendphoneButton").text("再次发送验证码");
									    } 
									} 
							,1000); //启动1秒定时 
						}else{
							$("#message").text(resultData.message);
					    	$('#sendphoneButton').removeAttr("disabled");
					    	$("#sendphoneButton").text("发送验证码");
						}
					},error:function(xhr){alert('错误了\n\n'+xhr.responseText)}//回调看看是否有出错
				});
			}else{
				console.log("不能点");
			}
		}
	</script>
	
</@layout>